<template>
  <Dialog :appDialog="appDialog">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="formData">
      <el-form-item label="选择员工" prop="work_user_id" label-width="150">
        <el-select :popper-append-to-body="false" class="form_item_input" popper-class="zw-hide_select_option" v-model="formData.work_user_id" placeholder="选择员工" multiple @click="openDepart" @change="changeDepart" :disabled="appDialog.controlType == 'edit'">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="限额类型" label-width="150" prop="limit_type" @change="changeradio">
        <el-radio-group v-model="formData.limit_type">
          <el-radio :label="1">单日</el-radio>
          <el-radio :label="2">单月</el-radio>
        </el-radio-group>
      </el-form-item>

        <el-form-item :label="lablenew" label-width="150" prop="limit_amount">
          <el-input-number v-model="formData.limit_amount" :controls="false" :precision="2" placeholder="请输入发放红包限额" maxlength="15"/>
          <span class="unit" >元</span>
        </el-form-item>
         <el-form-item :label="lablenewmouth" label-width="150" prop="limit_number">
          <el-input-number v-model="formData.limit_number" :controls="false" :precision="0" placeholder="请输入发放红包次数" maxlength="15" />
          <span class="unit" >次</span>
        </el-form-item>
      
      <!-- <el-form-item :label="lablenew" label-width="300" prop="limit_amount" required>
        <el-input v-model="formData.limit_amount" placeholder="请输入发放红包限额" maxlength="15">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="lablenewmouth" label-width="300" prop="limit_number" required>
        <el-input v-model="formData.limit_number" placeholder="请输入发放红包次数" maxlength="15">
          <template #append>次</template>
        </el-input>
      </el-form-item> -->
    </el-form>
    <div class="contant">
      <div> 注意事项：</div>
      <div>1、若在本系列所填写的数值超过在【微信支付商户平台】配置的数值，执行规则依然以官方配置为准，请合理填写。去引导配置。</div>
      <div>2、员工发送的限额和限次，以客户领取的额度和次数，均为客户+客户群的之和。</div>
      <div>3、若红包已发送到客户/客户群里，但客户尚未领取，此时微信支付商户平台出现账号余额不足时，客户打开红包页面无法领取，请务必保证账号余额充足，避免客户投诉。</div>
      <div>4、由于微信支付的【商户支付到零钱】超过2000元，需要客户实名和管理员确认，所以暂时单个红包金额的限额在2000元以内，如需发放更高金额，请联系<span @click="changePackage = true" style="color:#f7515c;font-size: 14px;cursor: pointer;">客服</span></div>
    </div>
  </Dialog>
  <!-- 部门人员弹框 -->
  <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
    <!-- 客服 -->
  <el-dialog v-model="changePackage" title="企业专属顾问" width="35%" center>
    <div class="qwQrCode">
      <img src="https://static.scrm.keyid.cn/assets/images/global/service.png" alt="" />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import Dialog from '@/components/Dialog.vue'
  import { inputCustomer } from '@/api/customerCenter'
  import { getlimitsave, getlimitedit } from '@/api/employe/redmanage/redmanageWord'
  import ZWDepart from '@/components/ZWDepart.vue'
  import { ElMessage } from 'element-plus'
  import { ref, reactive, watch, computed } from 'vue'
  import type { ElForm } from 'element-plus'
  import { getSetionId } from '@/utils/utils'
  import { useStore } from '@/store'
  const DepartRef = ref(null)
  const emit = defineEmits(['save', 'cancel'])
  const pro = defineProps(['selectid'])
  const selectid = ref(pro.selectid)
  type FormInstance = InstanceType<typeof ElForm>
  const ruleFormRef = ref<FormInstance>()
  const changePackage = ref(false)
  const store = useStore()
  let rules: any = ref({
    limit_type: { required: true, trigger: 'blur', message: '请选择限额类型' },
    work_user_id: { required: true, trigger: 'blur', message: '请选择员工' },
    limit_amount: { required: true, trigger: 'blur', message: '请输入发放红包限额' },
    limit_number: { required: true, trigger: 'blur', message: '请输入发放红包次数' }
  })
  const lablenew = ref('单日发放红包限额')
  const lablenewmouth = ref('单日发放红包次数')
  const creators = ref([])
  const formData = ref({
    limit_type: 1,
    work_user_id: [],
    limit_amount: 0,
    limit_number: 0
  })

  //打开新建选择人
  const openDepart = () => {
    if(appDialog.value.controlType == 'edit') return
    //判断为新建的时候选择员工赋值为空
    if(appDialog.value.controlType == 'add'){
      creators.value=[]
    }
    console.log( DepartRef.value.depart," DepartRef.value.depart")
    DepartRef.value.appDialog.title = '选择员工'
    DepartRef.value.departVisble = true
    // DepartRef.value.isMember = false // 可以选择部门
    DepartRef.value.selectedMember = creators.value
    //  DepartRef.value.depart.value="user"
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    console.log(res,"11111111111111=====")
    creators.value = res
    formData.value.work_user_id = getSetionId('id', creators.value)
  }
  // 删除部门成员
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    formData.value.work_user_id = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  const changeradio = (data: any) => {
    if (formData.value.limit_type == 1) {
      lablenew.value = '单日发放红包限额'
      lablenewmouth.value = '单日发放红包次数'
    } else {
      lablenew.value = '单月发放红包限额'
      lablenewmouth.value = '单月发放红包次数'
    }
  }
  // 关闭弹框
  const cancelHandel = () => {
    appDialog.value.visible = false
    emit('cancel')
  }

  // 保存
  const submitHandel = () => {
    if (formData.value.work_user_id.length == 0) {
      ElMessage.error('请选择员工')
      return
    } else if (!formData.value.limit_amount) {
      ElMessage.error('请输入发放红包限额')
      return
    } else if (!formData.value.limit_number) {
      ElMessage.error('请输入发放红包次数')
      return
    } else {
      if (appDialog.value.controlType == 'add') {
        getlimitsave(formData.value).then((data: any) => {
          emit('save')
          ElMessage.success('新建成功')
          appDialog.value.visible = false
        })
      } else {
        console.log(appDialog.value.userInfo.id, 'appDialog.value.userInfo.id')
        const pram = {
          ...formData.value,
          id: appDialog.value.userInfo.id
        }
        getlimitedit(pram).then((data: any) => {
          emit('save')
          ElMessage.success('编辑成功')
          appDialog.value.visible = false
        })
      }
    }
  }

  let appDialog = ref({
    visible: false,
    controlType: 'add',
    userInfo: {},
    title: '添加员工限额',
    width: '620px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
  })
  const getAttrListFun = () => {
    if (appDialog.value.controlType == 'add') {
      formData.value.limit_type = 1
      ;(formData.value.work_user_id = []), (formData.value.limit_amount = '')
      formData.value.limit_number = ''
    } else {
      console.log(appDialog.value.userInfo)
      creators.value = [{ id: appDialog.value.userInfo.work_user_id[0], name: appDialog.value.userInfo.work_user_name,type:'user' }]
      formData.value.limit_type = appDialog.value.userInfo.limit_type
      formData.value.work_user_id = appDialog.value.userInfo.work_user_id
      formData.value.limit_amount = appDialog.value.userInfo.limit_amount
      formData.value.limit_number = appDialog.value.userInfo.limit_number
    }
  }
  watch(
    () => appDialog.value.visible,
    (val) => {
      if (val) {
        // initFormData()
        // yuangongList.value = []
        // formData.value = []
        appDialog.value.title = appDialog.value.controlType == 'add' ? '添加员工限额' : appDialog.value.controlType == 'edit' ? '编辑员工限额' : '查看客户'
        getAttrListFun()
      }
    }
  )

  defineExpose({
    appDialog
  })
</script>

<style lang="scss" scoped>

.qwQrCode {
  text-align: center;
}
:deep .el-input__inner{
text-align: left;
}
:deep .el-input-number{
  width:300px
}
.unit{
  margin-left: 5px;
}
  .formData {
    max-height: 50vh;
    overflow-y: scroll;
    padding: 12px 30px 4px 0;

    .upload {
      .left {
        display: flex;
        margin-left: 10px;

        margin-bottom: 20px;
      }
    }
    .upload-content {
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 180px;
      height: 36px;
      border: 1px solid #eaeaea;
      margin-bottom: 6px;
      .upload {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
        opacity: 0;
      }
      .upload-box {
        position: relative;
        width: 180px;
        height: 36px;
        border-radius: 4px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #969696;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 9px;
        }
      }
      .upload-file-box {
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        width: 180px;
        height: 36px;
        line-height: 36px;
        .left {
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          color: #33302d;
          padding-left: 10px;
          span {
            vertical-align: middle;
          }
          img {
            margin-top: 8px;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            vertical-align: middle;
          }
        }
        .right {
          cursor: pointer;
          width: 12px;
          height: 12px;
          margin-right: 10px;
          margin-top: 12px;
        }
      }
    }

    .download {
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #ff6b00;
      margin-left: 10px;
      cursor: pointer;
    }
    .upload-desc {
      margin-top: 6px;
      background: #f9f9f9;
      border-radius: 1px;
      font-size: 12px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #696969;
      padding: 4px 8px;
      line-height: 16px;
    }
    .tabs-box {
      margin-bottom: 7px;
      div {
        display: inline-block;
        background: #fffaf9;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        justify-content: center;
        align-items: center;
        padding: 0 4px;
        line-height: 22px;
        height: 22px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #ff6b00;
        margin-right: 10px;
        margin-bottom: 7px;
        .del-icon {
          margin-left: 8px;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
    .yuangong-list {
      div {
        display: inline-block;
        vertical-align: middle;
        background: #fffaf9;
        border-radius: 1px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 4px 8px;
        line-height: 22px;
        box-sizing: border-box;
        img {
          width: 10px;
          height: 12px;
        }
        .del_icon {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
        span {
          margin: 0 10px;
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          color: #35383a;
        }
      }
    }
  }
  .formData::-webkit-scrollbar {
    display: none;
  }
  .contant {
    border: 1px solid #eaeaea;
    background: #f9f9f9;
    padding: 20px 15px;
    margin-bottom: 14px;
    line-height: 20px;
    div {
      margin-bottom: 10px;
      color: #969696;
      font-size: 13px;
    }
  }
</style>

<style>
  .upload-content .el-upload {
    display: block !important;
  }

  .upload-content .el-form-item__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>
